import React, { useEffect, useState } from 'react';
import PostList from '../components/PostList';
import { useParams, useNavigate } from 'react-router-dom';
import { fetchTopicDetail, updateTopic, deleteTopic } from '../api';

const TopicDetail: React.FC = () => {
  const { topicId } = useParams();
  const navigate = useNavigate();
  const [topic, setTopic] = useState<any>(null);
  const [editMode, setEditMode] = useState(false);
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [refreshFlag, setRefreshFlag] = useState(0);

  useEffect(() => {
    if (topicId) {
      fetchTopicDetail(topicId).then(res => {
        const data = res.data?.data || res.data;
        setTopic(data);
        setName(data?.name || '');
        setDescription(data?.description || '');
      });
    }
  }, [topicId]);

  // 用于刷新帖子列表
  const handlePostRefresh = () => setRefreshFlag(f => f + 1);

  const handleUpdate = async () => {
    if (topicId) {
      await updateTopic(topicId, { name, description });
      setEditMode(false);
      fetchTopicDetail(topicId).then(res => {
        const data = res.data?.data || res.data;
        setTopic(data);
        setName(data?.name || '');
        setDescription(data?.description || '');
      });
    }
  };

  const handleDelete = async () => {
    if (topicId && window.confirm('确定要删除该话题吗？')) {
      await deleteTopic(topicId);
      navigate('/');
    }
  };

  return (
    <div style={{ display: 'flex', height: '100vh', background: '#f6f7fb' }}>
      {/* 左侧：帖子列表 */}
      <div style={{ flex: 1, minWidth: 400, maxWidth: 600, padding: '32px 0 32px 32px' }}>
        {topic && (
          <div style={{ marginBottom: 24 }}>
            <h2>{topic.name}</h2>
            <div style={{ color: '#666', marginBottom: 8 }}>{topic.description}</div>
          </div>
        )}
        <PostList topicId={topicId ? topicId.toString() : ''} refreshFlag={refreshFlag} />
      </div>
      {/* 右侧：操作栏 */}
      <div style={{ width: 260, background: '#fff', borderLeft: '1px solid #eee', padding: '32px 24px 0 24px', boxShadow: '0 1px 4px 0 rgba(0,0,0,0.03)' }}>
        <button style={{ border: '1px solid #222', background: '#fff', color: '#222', borderRadius: 8, padding: '10px 24px', fontWeight: 500, fontSize: 16 }} onClick={() => navigate(`/topics/${topicId}/post`)}>
          创建帖子
        </button>
        {/* 可选：编辑/删除话题按钮 */}
        {editMode ? (
          <>
            <input value={name} onChange={e => setName(e.target.value)} placeholder="话题名称" />
            <textarea value={description} onChange={e => setDescription(e.target.value)} placeholder="话题描述" />
            <button onClick={handleUpdate}>保存</button>
            <button onClick={() => setEditMode(false)}>取消</button>
          </>
        ) : (
          <div style={{ marginTop: 24 }}>
            <button onClick={() => setEditMode(true)} style={{ marginRight: 8 }}>编辑话题</button>
            <button onClick={handleDelete} style={{ background: '#e53e3e', color: '#fff' }}>删除话题</button>
          </div>
        )}
      </div>
    </div>
  );
};

export default TopicDetail;